﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="CategoryList.aspx.cs" Inherits="ShopFine.CategoryList" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style>
        .sub-category-list {
            background-color: #f16325;
            color: white !important;
            font-weight: bold;
            line-height: 25px;
            height: 25px;
            font-size: 14px;
            text-transform: capitalize;
            border-radius: 4px;
            padding: 5px 10px;
            -webkit-transition:background .1s linear;
          -moz-transition:background .1s linear;
          transition:background .1s linear;
        }
        .sub-category-list:hover {
            -webkit-text-shadow:0 1px 0 rgba(0,0,0,.1);
            -moz-text-shadow:0 1px 0 rgba(0,0,0,.1);
            text-shadow:0 1px 0 rgba(0,0,0,.1);
            background-color: #B9410D !important;
        }
        .sub-category-list a {
            color: white !important;
        }
        .sub-category-list > a:focus,
        .sub-category-list > a:hover,
        .sub-category-list > a:focus i,
        .sub-category-list > a:hover i,
        .sub-category-list > a:focus span,
        .sub-category-list > a:hover span {
          color:#fff !important;
        }
        .sub-category-list > li:hover a{
          color:#fff !important;
          -webkit-text-shadow:0 1px 0 rgba(0,0,0,.1);
          -moz-text-shadow:0 1px 0 rgba(0,0,0,.1);
          text-shadow:0 1px 0 rgba(0,0,0,.1);
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="row">

        <%-- <aside class="span3">

            <div class="categories">
                <div class="titleHeader clearfix">
                    <h3>Categories</h3>
                </div>
                <!--end titleHeader-->
                <ul class="unstyled">
                    <li><a class="invarseColor active" href="#">Women (16)</a>
                        <ul class="submenu">
                            <li><a class="invarseColor" href="#">Beauty (3)</a></li>
                            <li><a class="invarseColor active" href="#">Dresses (4)</a></li>
                            <li><a class="invarseColor" href="#">Shorts (6)</a></li>
                            <li><a class="invarseColor" href="#">Shoes (2)</a></li>
                            <li><a class="invarseColor" href="#">Tops (1)</a></li>
                            <li><a class="invarseColor" href="#">Jakets &amp; Coats (7)</a></li>
                        </ul>
                    </li>
                    <li><a class="invarseColor" href="#">Men (6)</a></li>
                    <li><a class="invarseColor" href="#">Children (8)</a></li>
                    <li><a class="invarseColor" href="#">FootWear (3)</a></li>
                    <li><a class="invarseColor" href="#">Accesspries (56)</a></li>
                    <li><a class="invarseColor" href="#">Outlet (12)</a></li>
                    <li><a class="invarseColor" href="#">Community (0)</a></li>
                </ul>
            </div>
            <!--end categories-->

            <div class="pro-range-slider">
                <div class="titleHeader clearfix">
                    <h3>Shop By Price</h3>
                </div>
                <!--end titleHeader-->
                <div class="price-range">
                    <p class="clearfix">
                        <label>Price:</label>
                        <input type="text" id="amount">
                    </p>
                    <div id="slider-range"></div>
                </div>
            </div>
            <!--end pro-range-slider-->


            <div class="special">
                <div class="titleHeader clearfix">
                    <h3>Special</h3>
                </div>
                <!--end titleHeader-->

                <ul class="vProductItemsTiny">
                    <li class="span4 clearfix">
                        <div class="thumbImage">
                            <a href="#">
                                <img src="img/92x92.jpg" alt=""></a>
                        </div>
                        <div class="thumbSetting">
                            <div class="thumbTitle">
                                <a href="#" class="invarseColor">Foliomania the title here
                                </a>
                            </div>
                            <div class="thumbPrice">
                                <span>$150.00</span>
                            </div>
                            <ul class="rating">
                                <li><i class="star-off"></i></li>
                                <li><i class="star-off"></i></li>
                                <li><i class="star-off"></i></li>
                                <li><i class="star-off"></i></li>
                                <li><i class="star-off"></i></li>
                            </ul>
                        </div>
                    </li>
                    <li class="span4 clearfix">
                        <div class="thumbImage">
                            <a href="#">
                                <img src="img/92x92.jpg" alt=""></a>
                        </div>
                        <div class="thumbSetting">
                            <div class="thumbTitle">
                                <a href="#" class="invarseColor">Foliomania the designer portfolio
                                </a>
                            </div>
                            <div class="thumbPrice">
                                <span>$150.00</span>
                            </div>
                            <ul class="rating">
                                <li><i class="star-on"></i></li>
                                <li><i class="star-on"></i></li>
                                <li><i class="star-on"></i></li>
                                <li><i class="star-off"></i></li>
                                <li><i class="star-off"></i></li>
                            </ul>
                        </div>
                    </li>
                    <li class="span4 clearfix">
                        <div class="thumbImage">
                            <a href="#">
                                <img src="img/92x92.jpg" alt=""></a>
                        </div>
                        <div class="thumbSetting">
                            <div class="thumbTitle">
                                <a href="#" class="invarseColor">Foliomania the designer portfolio
                                </a>
                            </div>
                            <div class="thumbPrice">
                                <span>$150.00</span>
                            </div>
                            <ul class="rating">
                                <li><i class="star-on"></i></li>
                                <li><i class="star-on"></i></li>
                                <li><i class="star-on"></i></li>
                                <li><i class="star-off"></i></li>
                                <li><i class="star-off"></i></li>
                            </ul>
                        </div>
                    </li>
                    <li class="span4 clearfix">
                        <div class="thumbImage">
                            <a href="#">
                                <img src="img/92x92.jpg" alt=""></a>
                        </div>
                        <div class="thumbSetting">
                            <div class="thumbTitle">
                                <a href="#" class="invarseColor">Foliomania the designer portfolio
                                </a>
                            </div>
                            <div class="thumbPrice">
                                <span>$150.00</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!--end special-->

        </aside>--%>
        <!--end aside-->


        <div class="span12">

            <%--<div id="productSlider" class="carousel slide">
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="active item">
                        <img src="img/694x240.jpg" alt="">
                    </div>
                    <div class="item">
                        <img src="img/694x240.jpg" alt="">
                    </div>
                    <div class="item">
                        <img src="img/694x240.jpg" alt="">
                    </div>
                </div>

                <!-- Carousel nav -->
                <a class="carousel-control left" href="#productSlider" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#productSlider" data-slide="next">&rsaquo;</a>
            </div>--%>
            <!--end productSlider-->

            <div class="titleHeader clearfix">
                <h3>
                   Category:&nbsp; <asp:Literal runat="server" ID="titleCategory"></asp:Literal></h3>
                <div class="pagers">
                </div>
            </div>

            <div class="row">
                <ul class="hProductItems clearfix">
                    <asp:Repeater runat="server" ID="rptSubCategory">
                        <ItemTemplate>
                            <li class="span3 clearfix">
                                <div class="sub-category-list">
                                    <asp:HyperLink ID="hplSubCateLink" runat="server" NavigateUrl='<%# "~/SubCategory.aspx?id=" + Eval("ID") %>' Text='<%# (Eval("Name").ToString().Length > 25 ? Eval("Name").ToString().Substring(0,25) + "..." :Eval("Name")) + " (" + (Eval("Products") as ICollection<ShopFine.Models.Product>).Count.ToString()  + ")" %>'></asp:HyperLink>
                                </div>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>
            <!--end row-->

        </div>
        <!--end span9-->

    </div>
    <!--end row-->

</asp:Content>
